<template>
    <div>
        <div>
            <h1>侦听器-副作用清理</h1>
            <div>
                <input :disabled="isDisabled" v-model="question" type="text" placeholder="请输入问题" />
                <p>问题的结果：{{ answer }}</p>
                <p style="padding: 10px; font-size: 33px">{{ num }}</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo317'
}
</script>

<script setup lang='ts'>
import { debounce } from 'lodash';
import { ref, watch } from 'vue';


// 问题
const question = ref('')
// 问题的答案
const answer = ref('')
// 是否禁用
const isDisabled = ref(false)

const num = ref(0)

// 有时我们可能会在侦听器中执行副作用，例如异步请求
// 但是如果在请求完成之前 num 发生了变化怎么办？当上一个请求完成时，它仍会使用已经过时的 num 值触发回调。理想情况下，我们希望能够在 num 变为新值时取消过时的请求。
// 作为替代，onCleanup 函数还作为第三个参数传递给侦听器回调，以及 watchEffect 作用函数的第一个参数：
watch(question, debounce((newVal, oldVal, onCleanup) => {

    // 设置定时器
    const timeoutid = setInterval(() => {
        num.value++

    }, 1000);

    console.log('监听器被执行');

    onCleanup(() => {
        console.log('触发了onCleanup');
        // 清除定时器
        clearInterval(timeoutid)
    })


}))

</script>

<style></style>